import React, { useEffect, useState, createRef, useRef } from 'react'

import img from './assets/1.gif'

// 通过useState提供状态
// 通过useEffect给document注册鼠标移动事件
// 在组件销毁的时候清理副作用

import useMouse from './useMouse'

const Img = ({ position }) => {
    const imgDom = createRef() //  通用   获取dom  
    const imgDom2 = useRef(null)

    // console.log(imgDom2.current) // hooks 获取dom

    return (
        <img src={img} alt="" style={{ width: '300px', borderRadius: '50%', position: 'absolute', left: position.x, top: position.y }} id='img'
            // ref={imgDom}
            ref={imgDom2}
        />
    )
}

const ShowPosition = ({ position }) => {
    return (
        <div> X: {position.x}----------y: {position.y}</div>
    )
}

// const Home = () => {
//     return (
//         <div>  home  组件</div>
//     )
// }

//  
class Home extends React.Component {
    state = {
        msg: 'hello'
    }
    changMsg = (payload = null) => {
        this.setState({
            msg: '你好' + payload
        })
    }

    render () {
        return (
            <div>  home  组件
                <h2 onClick={this.changMsg}> {this.state.msg}</h2>
            </div>
        )
    }
}


export default function Mouse () {

    const refHome = useRef(null)  // 不能获取函数式组件  但是class 组件可以获取到

    const refCreateHome = createRef(null) // 获取不到函数式组件
    // const position = useMouse()

    const handlerClick = () => {
        console.log(refHome.current)  //  state changMsg
        // console.log(refCreateHome)
        console.log(refHome.current.state)


        // refHome.current.changMsg()
        refHome.current.changMsg('张三')
    }


    return (
        <div>Mouse--------  <button onClick={handlerClick}> 父组件点击获取home 组件实例</button>


            {/* <ShowPosition position={position}></ShowPosition>
            <Img position={position} ></Img> */}
            <Home ref={refHome}></Home>
            {/* <Home ref={refCreateHome}></Home> */}

        </div>
    )
}
